import draggable from 'vuedraggable';
export default {
  name: 'engHtml',
  functional: true,
  render(h, ctx) {
    /**
 * 大驼峰命名法，首字母大写
 */
    const isPlainObject = obj => {
      return Object.prototype.toString.call(obj) === '[object Object]';
    };
    const log = e => {
      // const cloneH = <div class='tmptmp handle'>{}</div>;
      if (e.from.className.indexOf('tag-box-ul') > -1) {
        var parent = e.target;

        const cloneH = document.createElement('div');
        cloneH.className = 'tmptmp handle';
        cloneH.innerHTML = `{${e.clone.innerText}}`;
        if (!parent.lastChild) {
          parent.appendChild(cloneH);
        } else if (e.newIndex === 0) {
          parent.insertBefore(cloneH, parent.childNodes[0]);
        } else if (parent.lastChild === parent.childNodes[e.newIndex - 1]) {
          parent.appendChild(cloneH, parent.childNodes[e.newIndex - 1]);
        } else {
          parent.insertBefore(cloneH, parent.childNodes[e.newIndex]);
        }
      }
    };

    const toElement = (elementInfo, flag = true) => {
      if (elementInfo.type === 'tag') {
        if (elementInfo.tagName === 'td') {
          return <draggable
            group={{ name: 'people', put: !(elementInfo.classNames.indexOf('data') === -1 || (elementInfo.children?.length === 1 && elementInfo.children?.[0]?.content?.trim() === '')) }}
            tag={elementInfo.tagName}
            handle='.handle'
            filter='.ssssable'

            componentData={{
              attrs: elementInfo.attrs
            }}
            onAdd={(e) => { log(e); }}

            style={elementInfo.inlineStyle}
            class={[elementInfo.tagName === 'td' && (elementInfo.classNames.indexOf('data') === -1) ? 'ssssable' : '', elementInfo.classNames]} >
            { Array.isArray(elementInfo.children) ? elementInfo.children.map(item => toElement(item, elementInfo.classNames.indexOf('data') > -1 && !(elementInfo.children?.length === 1 && elementInfo.children?.[0]?.content?.trim() === ''))) : '1'}
          </draggable>;
        } else {
          return <elementInfo.tagName

            style={elementInfo.inlineStyle}
            class={[(elementInfo.classNames.indexOf('data') === -1 || (elementInfo.children?.length === 1 && elementInfo.children?.[0]?.content?.trim() === '')) ? 'ssssable' : '', elementInfo.classNames]} >
            { Array.isArray(elementInfo.children) ? elementInfo.children.map(item => toElement(item, elementInfo.classNames.indexOf('data') > -1 && !(elementInfo.children?.length === 1 && elementInfo.children?.[0]?.content?.trim() === ''))) : '1'}
          </elementInfo.tagName>;
        }
      } else {
        if (elementInfo.content.trim() && flag) {
          return <div
            class='tmptmp handle'
          >{elementInfo.content}</div>;
        } else {
          return elementInfo.content;
        }
      }

      // switch (elementInfo.type) {
      //   case TAG:

      //     results.push('<', elementInfo.tagName);
      //     if (elementInfo.inlineStyle) {
      //       results.push(' style="', elementInfo.inlineStyle, '"');
      //     }
      //     if (elementInfo.classNames) {
      //       results.push(' class="', elementInfo.classNames, '"');
      //     }
      //     setAttrs(elementInfo.attrs, results);
      //     if (selfCloseTagRegexp.test(elementInfo.tagName)) {
      //       results.push(' />');
      //     } else {
      //       results.push('>');
      //       if (Array.isArray(elementInfo.children)) {
      //         elementInfo.children.forEach(item => toElement(item, results));
      //       }
      //       results.push('</', elementInfo.tagName, '>');
      //     }
      //     break;
      //   case TEXT:
      //     results.push(`<draggable  class='h-100 d-flex flex-column'
      //     group={{ name: 'people' }}>${elementInfo.content}</draggable>`);
      //     break;
      //   case COMMENT:
      //     results.push('<!-- ', elementInfo.content, ' -->');
      //     break;
      //   default:
      // ignore
    };
    const toHTML = json => {
      json = json || [];
      if (isPlainObject(json)) {
        json = [json];
      }
      const results = [];
      return json.map(item => toElement(item, results));
    };

    const ele = ctx.props.ele;
    return toHTML(ele);
  }
};

